/* eslint-disable react/no-multi-comp */

import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtIcon, AtInputNumber } from 'taro-ui'
import { observer, inject, Provider } from '@tarojs/mobx'
import styles from './index.module.less'
import Footer from '../../components/Footer'
import CardList from '../../components/CardList'
import cartStore from '../../store/cart'

const store = {
    cartStore
}

const goodsItem = { id: 'adfedfef88555', title: '蒙宝盒子来喽~12月龄', curPrice: 199.99, price: 299, subTitle: '有多神奇？ 这是一款寓教于乐的盒子！ 这是一款蕴含蒙氏育儿理念的盒子！ 这是一款提供蒙氏育儿策略的盒子！' }
@inject('cartStore')
@observer
class Index extends Component {
    constructor(props) {
        super(props)

        this.state = {
            value: 1
        }
    }

    addCart = (item) => {
        this.props.cartStore.addCart(item)
    }

    handleChange(value) {
        this.setState({
            value
        })
    }


    render() {

        return (
            <View className={styles.page}>
                <View className={styles.infoBar}>
                    <View className={styles.name}>
                        <AtIcon value='home' size='15' color='#999' />
                        悦蒙氏
                    </View>
                    <View className={styles.value}>
                        <AtIcon value='chevron-right' size='13' color='#999' />
                    </View>
                    <View className={styles.info}>
                        编辑
                    </View>
                </View>
                <CardList title={goodsItem.title} subTitle={goodsItem.curPrice} img='https://img.yzcdn.cn/upload_files/2020/03/30/Fk29UIfEQ1VHGQJXhWIziQaCwgTE.jpg!large.jpg' metas={['剩余：99']} type={null} />
                <View className={styles.infoBar}>
                    <View className={styles.value} style={{ width: '70%' }}>购买数量</View>
                    <AtInputNumber
                        min={1}
                        max={99}
                        step={1}
                        value={this.state.value}
                        onChange={this.handleChange.bind(this)}
                    />
                </View>
                <Footer />
            </View >
        )
    }
}

export default props =>
    <Provider store={store}>
        <Index {...props} />
    </Provider>